<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ID选择器</title>
    <style>
        #red{
            color:red;
            font-size:23px;
        }
        #green{
            color:green;
            font-size:20px;
            text-decoration: underline;
        }
        .table1{
         border:1px solid red;
        }
    </style>
</head>
<body>
<article>
    <p id="red">这是一段演示用文字！</p>
    <p id="green">这是一段演示用文字！</p>
    <p><u>这是一段演示用文字！</u></p>
</article>
<article>
    <table class="table1">
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </table>
    <table  >
        <tbody>
        <tr>
            <th colspan="2">我是占位符</th>
<!--            横向占位符-->
            <th colspan="2">我是占位符</th>
        </tr>
        <tr>
            <th rowspan="2">我是占位符</th>
<!--            纵向合并单元格-->
            <th>我是占位符</th>
            <th>我是占位符</th>
            <th>我是占位符</th>
        </tr>
        <tr>
            <th>我是占位符</th>
            <th>我是占位符</th>
            <th>我是占位符</th>
        </tr>
        </tbody>
    </table>
</article>
</body>
</html>